<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>买入</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/style.css" />
		<link rel="stylesheet" href="../../css/iconfont.css" />
		<link rel="stylesheet" href="../../css/icons-extra.css" />
		<link href="../../css/mui.picker.css" rel="stylesheet" />
		<link href="../../css/mui.poppicker.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/iconfont3.css" />
		<link rel="stylesheet" href="../css/iconfont6.css" />
		<link rel="stylesheet" href="../../font/iconfont.css" />

		<!--App自定义的css-->
		<style>
			.mui-card .mui-control-content {
				padding: 10px;
			}
			
			.mui-slider-group .mui-control-content {
				position: relative;
				width: 100%;
				height: 86%;
				padding: 0 5px;
			}
			
			.mui-bar {
				background-color: #05508a;
				height: 50px;
			}
			
			.buybox {
				height: 36px;
				width: 80px;
				text-align: center;
				line-height: 36px;
				background: #000000;
				color: white;
			}
			
			.buy-left {
				float: left;
			}
			
			.buy-right {
				float: left;
			}
			
			.buy-active {
				background: -webkit-linear-gradient(left, #fbed21, #fab03b);
				color: #fff;
			}
			
			.mui-bar-nav~.mui-content {
				padding: 0px;
			}
			
			.mui-content {
				margin: 80px 0;
			}
			
			body {
				background: #E3E3E3;
				font-size: 13px;
			}
			
			.mui-content {
				background: #fff;
			}
			
			.figure {
				background: #C0C0C0;
			}
			
			.mui-bar-nav {
				top: 0;
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			
			.mairu_guojia p {
				line-height: 30px;
				color: #000;
				margin: 0;
				border-bottom: 1px solid #434343;
			}
			
			.mui-segmented-control .mui-control-item.mui-active {
				transform: translate3d(0px, 0px, 0px) translateZ(0px);
			}
			
			.mui-table-view-cell {
				padding: 0px 0px 10px 0px;
				border-bottom: 1px dashed #505050;
				color: white;
			}
			
			.mui-table-view {
				background-color: #fff;
				padding: 0 10px;
			}
			
			.mui-segmented-control .mui-control-item {
				color: #b3b3b3;
				border: none;
			}
			
			.mui-segmented-control {
				border: none;
			}
			
			.mui-segmented-control .mui-control-item.mui-active {
				color: #006cff;
				border-bottom: 3px solid #006cff;
				background: none;
			}
			
			.mui-table-view:before {
				background: none;
			}
			
			.mui-table-view-cell:after {
				background: none;
			}
			
			.buy-bdetail {
				width: 60%;
				float: left;
			}
			
			.number_right {
				width: 40%;
				float: right;
			}
			
			.number_right span {
				float: right;
				font-size: 11px;
				color: #666;
				line-height: 15px;
			}
			
			.credit {
				font-size: 11px;
				line-height: 12px;
				color: #666;
			}
			
			.mui-table-view-cell p {
				color: #000;
				font-size: 16px;
			}
			
			.mui-media-body img {
				width: 16px;
			}
			
			.iconfont {
				font-size: 16px;
			}
			
			.number_right .transaction_num {
				font-size: 14px;
				line-height: 20px;
				color: #666;
			}
			
			.number_right .button {
				border: none;
				color: #fff;
				width: 40%;
				border-radius: 10px;
				text-align: center;
				font-size: 11px;
				height: 16px;
				line-height: 16px;
				background-color: #006cff;
			}
			
			.transaction-title {
				position: fixed;
				top: 40px;
				left: 0px;
				padding: 0px;
				z-index: 999;
			}
			
			.mui-slider-group {
				padding-top: 240px;
			}
			
			.mui-table-view-cell.mui-active {
				background: none;
			}
			
			.mui-pull-loading {
				color: #fff;
			}
			
			.mui-control-content {
				padding-bottom: 20px;
			}
			
			#segmentedControl1 {
				display: table;
			}
		</style>

		<style>
			input[type=password] {
				border-radius: 0;
			}
			
			#keyboard {
				height: 230px;
				background-color: rgb(245, 245, 245);
				bottom: 0;
				width: 100%;
				padding: 0;
				position: fixed;
				z-index: 10;
				right: 0;
				left: 0;
				border-top: 1px solid #c8c7cc;
				color: #333;
			}
			
			#arrowdown {
				width: 100%;
				text-align: center;
				border-bottom: 1px solid #c8c7cc;
			}
			
			#keyboard .num {
				width: 33.15%;
				padding-top: 13px;
				padding-bottom: 14px;
				text-align: center;
				float: left;
				color: #333;
			}
			
			.payment_pwd {
				width: 36px;
				height: 36px;
				margin-left: 0;
				float: left;
				color: #333;
			}
			
			#main_content {
				width: 78%;
				height: 104px;
				margin-bottom: 80%;
				border-radius: 8px;
				margin-top: 10px;
				margin: 0 auto;
				position: fixed;
				top: 12%;
				left: 10%;
			}
			
			#main_content .mui-input-row {
				overflow: visible;
			}
			
			.payment_password {
				display: flex;
				justify-content: center;
				height: 36px;
			}
			
			.mui-pull-bottom-wrapper {
				text-align: center;
			}
			
			.mui-pull-bottom-wrapper .mui-pull-loading {
				line-height: 44px;
			}
			
			.mairu_guojia {
				position: relative;
			}
			
			.mairu_guojia a {
				display: block;
				width: 15%;
				height: 20px;
				line-height: 22px;
				border-radius: 8px;
				border: none;
				position: absolute;
				text-align: center;
				right: 10px;
				top: 5px;
				float: left;
				background: #05508a;
				color: white;
			}
			/*银行卡信息*/
			
			.bankcard {
				margin-top: 10px;
				background: #ddd;
				margin-bottom: 10px;
			}
			
			.bankcard .mui-table-view {
				background: #fff;
				padding-top: 0px;
			}
			
			.bankcard .mui-table-view .mui-table-view-cell a {
				color: #000;
				margin: 0px;
				padding: 10px 0 0 0;
			}
			
			.card_info {
				padding: 10px;
				background: #fff;
			}
			
			.card_info p {
				color: #333;
			}
			/*创建订单*/
			
			.creatbtn button {
				height: 40px;
				line-height: 1;
			}
			
			.mairu_list.figure .mui-btn.selected {
				background-color: #05508a;
				color: #fff;
			}
			
			.unbank {
				height: 70px;
				background: #ddd;
				margin-bottom: 10px;
			}
			
			.unbank a {
				text-align: center;
				line-height: 70px;
			}
			
			.unbank a p {
				color: #000;
			}
			
			.mui-title {
				display: -webkit-flex;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
			}
			
			.mui-title span {
				height: 40px;
				line-height: 40px;
				padding: 0 18px;
				text-align: center;
				display: inline-block;
				background: #0a1141;
				font-size: 14px;
			}
			
			.mui-title span:nth-of-type(1) {
				border-top-left-radius: 30px;
				border-bottom-left-radius: 30px;
			}
			
			.mui-title span.actives {
				background: #ccc;
				color: #0a1141;
			}
			
			.mui-title span:nth-of-type(2) {
				margin-left: -5px;
				border-top-right-radius: 30px;
				border-bottom-right-radius: 30px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="height:50px;background:#05508a;">
			<!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color:#fff;padding-top:12px;"></a>-->
			<h1 class="mui-title" style="line-height: 50px;color:#fff;" lang>
				<span>买入</span>
				<span id="sale_order" class="actives">卖出</span>
			</h1>
		</header>

		<!--买入 -->
		<div class="mui-content" id="buy_list">
			<div style="top: 50px;height: auto;position: absolute;right: 0;
				bottom: 0;
				left: 0;
				z-index: 1;
				overflow: hidden;
				width: 100%;">
				<div style="position: relative;width: 100%;overflow: hidden;bottom: auto;">
					<div class="transaction-title" style="margin-top:10px;">
						<div class="mairu_list navigation" style="margin-bottom:10px;background:#fff;border:none;">
							<button class="mui-btn" style="color:#05508a;background:#ccc;" id="create_order" lang>创建订单</button>
							<button class="mui-btn" style="background:#ccc;" id="uncompleted.html" lang>未完成订单</button>
							<button class="mui-btn" style="background:#ccc;" id="remit.html" lang>确认打款</button>
							<button class="mui-btn" style="background:#ccc;" id="buy_completed_order.html" lang>已完成订单</button>
							<button class="mui-btn" style="background:#ccc;" id="buy_record.html" lang>买入记录</button>
							<button class="mui-btn" style="background:#ccc;" id="buy_center.html" lang>买入中心</button>
						</div>
						<!--绑定的银行卡-->
						<div class="bankcard">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right" id="select_card" lang>
										选择支付方式
									</a>
								</li>
							</ul>
							<div class="card_info">
								<p id="true_name">
									<!--姓名-->
								</p>
								<p id="bank_name">
									<!--中国银行-->
								</p>
								<p>
									<font lang>账号：</font>
									<font id="bank_no">
										<!--6222333344445555666-->
									</font>
								</p>
								<input type="hidden" name="bank_addr" id="bank_addr" value="" />
								<input type="hidden" name="bank_id" id="bank_id" value="" />
							</div>
						</div>

						<!--未绑定银行卡-->
						<div class="unbank" style="display: none;">
							<a id="add_card" onclick="add_card()">
								<p lang>+请添加中国的银行卡！</p>
							</a>
						</div>

						<div class="mairu_guojia" style="background:#fff;">
							<p lang>请选择买入数额</p>
							<a id="country1">中国</a>
						</div>
						<div class="mairu_list figure" style="background:#fff;padding-top:0px;padding-bottom:0px;height:60px;">
							<button class="mui-btn" style="width:20%;">500</button>
							<button class="mui-btn" style="width:20%;">1000</button>
							<button class="mui-btn" style="width:20%;">1500</button>
							<button class="mui-btn" style="width:20%;">2000</button>

						</div>

						<!--创建订单-->
						<div class="mui-button-group creatbtn" style="margin-top:30px;">
							<button class="mui-btn mui-btn-blue mui-btn-block" style="background:#05508a;border:none;" id="create" lang>创建订单</button>
						</div>

					</div>
				</div>

			</div>

		</div>

		<!--遮罩-->
		<div id="account_pwd" style="z-index:5000; background-color:#000; opacity:0.2; filter:alpha(opacity=40);position: fixed;
	    top: 0;
	    display:none;
	    left: 0;"></div>
		<div class="mui-content" id="main_content" style="z-index: 6000;background:#fff;top: 14%;position: fixed;display:none;">
			<div style="text-align: center;font-size: 16px;height:30px;color:#333;margin-top:3%;">
				<span class="mui-icon iconfont icon-guanbi" style="float:right;color:#000;margin-right:2%;" id="close_win"></span>
				<span style="width:70%;float:left;margin-left: 15%;" lang>请输入支付密码</span>
			</div>

			<div class="mui-input-row mui-password payment_password" style="margin-top:10px;">
				<div style="width:36px;height:36px;margin-left:2%;float:left;color:#333;">
					<input class="" type="password" value="" style="width:100%;padding:0;text-align:center;" readonly="readonly">
				</div>

				<div class="payment_pwd">
					<input class="" type="password" value="" style="width:100%;padding:0;text-align:center;border-left:0;" readonly="readonly">
				</div>

				<div class="payment_pwd">
					<input class="" type="password" value="" style="width:100%;padding:0;text-align:center;border-left:0;" readonly="readonly">
				</div>

				<div class="payment_pwd">
					<input class="" type="password" value="" style="width:100%;padding:0;text-align:center;border-left:0;" readonly="readonly">
				</div>

				<div class="payment_pwd">
					<input class="" type="password" value="" style="width:100%;padding:0;text-align:center;border-left:0;" readonly="readonly">
				</div>

				<div class="payment_pwd">
					<input class="" type="password" value="" style="width:100%;padding:0;text-align:center;border-left:0;" readonly="readonly">
				</div>
			</div>
		</div>

		<div id="keyboard" style="z-index: 6000;position: fixed;display:none;">
			<div id="arrowdown">
				<span class="mui-icon mui-icon-arrowdown" style="font-size:26px;padding-top:3px;padding-bottom:3px;"></span>
			</div>
			<div>
				<div id="num1" data-num="1" class="num data_num" style="border-right:1px solid #c8c7cc;">
					<span>1</span>
				</div>
				<div id="num2" data-num="2" class="num data_num" style="border-right:1px solid #c8c7cc;">
					<span>2</span>
				</div>
				<div id="num3" data-num="3" class="num data_num" style="">
					<span>3</span>
				</div>

				<div id="num4" data-num="4" class="num data_num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;">
					<span>4</span>
				</div>
				<div id="num5" data-num="5" class="num data_num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;">
					<span>5</span>
				</div>
				<div id="num6" data-num="6" class="num data_num" style="border-top:1px solid #c8c7cc;">
					<span>6</span>
				</div>

				<div id="num7" data-num="7" class="num data_num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;">
					<span>7</span>
				</div>
				<div id="num8" data-num="8" class="num data_num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;">
					<span>8</span>
				</div>
				<div id="num9" data-num="9" class="num data_num" style="border-top:1px solid #c8c7cc;">
					<span>9</span>
				</div>

				<div class="num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;background-color:rgb(224,224,224);">
					<span>&nbsp;</span>
				</div>
				<div id="num0" data-num="0" class="num data_num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;">
					<span>0</span>
				</div>
				<div id="numC" data-num="C" class="num" style="border-top:1px solid #c8c7cc;background-color:rgb(224,224,224);padding-top: 13px;
    						padding-bottom: 5px;">
					<div><span class="mui-icon iconfont icon-weibiaoti-"></span></div>
				</div>

			</div>
		</div>

		<!--底部导航-->
		<nav class="mui-bar mui-bar-tab " id="nav" style="background-color: #fff;">
			<a class="mui-tab-item" id="../../index.html">
				<span class="mui-icon iconfont iconshouye"></span>
				<span class="mui-tab-label" lang>首页</span>
			</a>
			<a class="mui-tab-item  mui-active" id="buy_in.html">
				<span class="mui-icon iconfont iconjiaoyi"></span>
				<span class="mui-tab-label" lang>交易</span>
			</a>
			<a class="mui-tab-item" id="../../weep.html">
				<span class="mui-icon iconfont iconzhifu"></span>
				<span class="mui-tab-label" lang>支付</span>
			</a>
			<a class="mui-tab-item" id="../../mall/index_m.html">
				<span class="mui-icon iconfont iconshangcheng"></span>
				<span class="mui-tab-label" lang>商城</span>
			</a>

			<a class="mui-tab-item" id="../../setting.html">
				<img src="../../img/dot_bk.png" style="width: 2%;position: absolute;margin-left: 24px;margin-top: 4px;" />
				<span class="mui-icon iconfont iconzhanghu"></span>
				<span class="mui-tab-label" lang>我的</span>
			</a>
		</nav>

		<script src="../../lang/pages.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/config.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/sockjs.js"></script>
		<script src="../../resource/index/guide.js"></script>
		<script src="../../js/mui.pullToRefresh.js"></script>
		<script src="../../js/mui.pullToRefresh.material.js"></script>
		<script src="../../js/mui.picker.js"></script>
		<script src="../../js/mui.poppicker.js"></script>
		<script src="../../js/jquery-1.7.2.min.js"></script>
		<script src="../../resource/transaction/buy_in.js"></script>

	</body>

</html>